Custom Cells in XAML

If you prefer to create custom cells in XAML instead of writing code, you can do that as well. The C1FlexGrid Column object has CellTemplate and CellEditingTemplate properties that you can use to specify the visual elements responsible for showing and editing cells in the column.

For example, the XAML code below defines custom visual elements used to show and edit values in a column. Cells in that column are shown as green, bold, center-aligned text, and edited using a textbox that has an edit icon next to it:

Markup	Copy Code
<c1:C1FlexGrid x:Name="_fgTemplated"> <c1:C1FlexGrid.Columns> <!-- add a templated column --> <c1:Column ColumnName="_colTemplated" Header="Template" Width="200"> <!-- template for cells in display mode --> <c1:Column.CellTemplate> <DataTemplate> <TextBlock Text="{Binding Name}" Foreground="Green" FontWeight="Bold" VerticalAlignment="Center"/> </DataTemplate> </c1:Column.CellTemplate> <!-- template for cells in edit mode --> <c1:Column.CellEditingTemplate> <DataTemplate> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Image Source="edit_icon.png" Grid.Column="0" /> <TextBox Text="{Binding Name, Mode=TwoWay}" Grid.Column="1" /> </Grid> </DataTemplate> </c1:Column.CellEditingTemplate> </c1:Column> </c1:C1FlexGrid.Columns> </c1:C1FlexGrid>

Markup

Copy Code

<c1:C1FlexGrid x:Name="_fgTemplated">
   <c1:C1FlexGrid.Columns>
     <!-- add a templated column -->
     <c1:Column ColumnName="_colTemplated" Header="Template" Width="200">
       <!-- template for cells in display mode -->
       <c1:Column.CellTemplate>
         <DataTemplate>
           <TextBlock Text="{Binding Name}"
            Foreground="Green" FontWeight="Bold"
            VerticalAlignment="Center"/>
         </DataTemplate>
       </c1:Column.CellTemplate>
       <!-- template for cells in edit mode -->
       <c1:Column.CellEditingTemplate>
         <DataTemplate>
           <Grid>
             <Grid.ColumnDefinitions>
               <ColumnDefinition Width="Auto" />
               <ColumnDefinition Width="*" />
             </Grid.ColumnDefinitions>
             <Image Source="edit_icon.png" Grid.Column="0" />
             <TextBox Text="{Binding Name, Mode=TwoWay}" Grid.Column="1" />
           </Grid>
         </DataTemplate>
       </c1:Column.CellEditingTemplate>
     </c1:Column>
   </c1:C1FlexGrid.Columns>
 </c1:C1FlexGrid>